<template>
  <div class="main-container">
    <div class="top">
      <!-- 上半部分内容 -->
      <!--头像显示区域-->
      <el-row>
        <el-col :span="24" class="avatar-col">
          <div class="avatarSave-container" style="margin-right: 35px">
            <el-upload
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :action="BASE_API+'/kaioss/fileoss'"
              class="avatar-uploader">
              <img v-if="user.avatar" :src="user.avatar" width="100px" height="100px" style="border-radius: 50%;"/>
              <img v-else src="/static/avatar.webp" width="100px" height="100px" style="border-radius: 50%;"/>
            </el-upload>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="bottom">
      <!-- 下半部分内容 -->
      <el-form class="centered-form">
        <el-form-item class="custom-form-item" label="姓名">
          <el-col :span="20" class="centered-col">
            <el-input class="long-input" v-model="user.friendName"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item class="custom-form-item" label="地址">
          <el-col :span="20" class="centered-col">
            <el-input v-model="user.address"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item class="custom-form-item" label="邮箱">
          <el-col :span="20" class="centered-col">
            <el-input v-model="user.email"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item class="custom-form-item">
          <label class="el-form-item__label" style="margin-left: 7px">QQ</label>
          <el-col :span="20" class="centered-col">
            <el-input v-model="user.qq"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item class="custom-form-item" label="微信">
          <el-col :span="20" class="centered-col">
            <el-input v-model="user.wechat"></el-input>
          </el-col>
        </el-form-item>

        <!--把邮编和性别放一行-->
        <el-form-item class="custom-form-item" label="邮编">
          <el-row>
            <el-col style="width: 100px" class="centered-col">
              <el-input v-model="user.postcode"></el-input>
            </el-col>
            <label class="el-form-item__label" style="padding-right: 0px;margin-left: 30px">性别</label>
            <!--            <el-col class="centered-col">-->
            <el-select v-model="user.sex" class="phone" clearable placeholder="请选择性别">
              <!--妙啊，这里数据和1双向绑定就能，在查询显示男而不是显示1-->
              <el-option label="男" :value="1"></el-option>
              <el-option label="女" :value="0"></el-option>
            </el-select>
            <!--            </el-col>-->
          </el-row>
        </el-form-item>
        <el-form-item class="custom-form-item" label="电话">
          <el-row>
            <el-col style="width: 100px" class="centered-col">
              <el-input v-model="user.phone"></el-input>
            </el-col>
            <label class="el-form-item__label" style="padding-right: 0px;margin-left: 30px">生日</label>
            <!--            <el-col class="centered-col">-->
            <el-date-picker v-model="user.birthday" type="date" placeholder="请选择生日"></el-date-picker>
            <!--            </el-col>-->
          </el-row>
        </el-form-item>

        <el-row class="button-row">
          <el-col :span="24">
            <el-button type="primary" @click="saveOrUpdate">保存</el-button>
            <el-button @click="addEvent">添加事项</el-button>
          </el-col>
        </el-row>

        <!--这一行不能删除，删除布局就变了，不知道为啥-->
        <el-form-item class="custom-form-item" style="visibility: hidden">
          <el-row>
            <el-col>
              <label class="el-form-item__label">生日</label>
              <el-date-picker v-model="user.birthday" type="date" placeholder="请选择生日"></el-date-picker>
            </el-col>
            <label class="el-form-item__label">电话</label>
            <el-col class="short-input centered-col">
              <el-input v-model="user.phone" placeholder="请输入电话"></el-input>
            </el-col>
          </el-row>
        </el-form-item>

      </el-form>

    </div>

  </div>
</template>

<script>
import userApi from '@/api/edu/friend'

export default {
  data() {
    return {
      BASE_API: process.env.BASE_API, // 接口API地址
      user: {
        friendName: '',
        sex: -1,
        email: '',
        qq: '',
        wechat: '',
        phone: '',
        address: '',
        postcode: '',
        birthday: '',
        avatar: '',
      },
      saveBtnDisabled: false, // 保存按钮是否禁用,
    };
  },
  watch: {
    // 监听
    $route(to, from) {
      // 路由变化方式，路由发生变化，方法就会执行
      this.init()
    },
  },
  created() {
    this.init()
  },
  methods: {
    getSelect() {
      if (this.user.sex === -1) {
        return '请选择性别'
      } else if (this.user.sex === 0) {
        return '女'
      } else if (this.user.sex === 1) {
        return '男'
      }
    },
    //上传封面成功调用的方法
    handleAvatarSuccess(res, file) {
      // console.log("返回值" + res.data.url)
      this.user.avatar = res.data.url
      this.$forceUpdate()
    },
    //上传之前调用的方法
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 判断路由里有没有id值，决定是详情还是保存
    init() {
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id
        this.getInfo(id)
      } else {
        this.user = {}
      }
    },
    // 根据id查询朋友的信息
    getInfo(id) {
      userApi.getFriendInfo(id).then(response => {
        this.user = response.data.user
      })
    },
    dateFormat(value) {
      var date = new Date(value);
      var year = date.getFullYear();
      var month = date.getMonth() < 9 ? "0" + (date.getMonth() + 1) : "" + (date.getMonth() + 1);
      var day = date.getDate() < 10 ? "0" + date.getDate() : "" + date.getDate();
      return (year + "-" + month + "-" + day);
    },
    // 保存按钮，判断是添加还是修改
    saveOrUpdate() {
      // 根据teacher判断是否有id
      if (!this.user.id) {
        // 没有id，添加
        this.saveFriend()
      } else {
        this.updateFriend()
      }
    },
    // 修改用户的方法
    updateFriend() {
      userApi.updateFriend(this.user).then(Response => {
        this.$message({
          type: 'success',
          message: '修改成功'
        })
        // 回到列表页面，路由跳转
        this.$router.push({path: '/'})
      })
    },
    // 保存
    saveFriend() {
      userApi.addFriend(this.user)
        .then(response => { // 添加成功
          // 提示信息
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
        }).then(response => {
        // 回到列表页面，路由跳转
        this.$router.push({path: '/'})
      }).catch((response) => {
        this.$message({
          type: 'error',
          message: '保存失败'
        })
      })
    }, addEvent() {

    },

  }
}
</script>

<style>
.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top {
  margin-bottom: 20px;
}

.bottom {
  text-align: center;
}

.avatar-col {
  display: flex;
  justify-content: center;
}

.centered-form {
  margin: 0 auto;
}

.centered-col {
  text-align: center;
}
/*我的手机在min是361px之间*/
@media screen and (min-width: 360px) and (max-width: 450px) {
  .phone{
    width: 150px;
  }
}
</style>
